<template>
	<view class="center ">
		<u-toast ref="uToast" />
		<view class="header_info box box-align-center box-pack-between pad_def mar_bot">
			<view class="left_info box box-align-center">
				<image :src="appInfo.avatar" mode="widthFix" style="width: 140rpx;border-radius: 50%;"></image>
				<view class="name">学生平板</view>
			</view>
			<view class="right_info">
				<view>在线状态：{{isOnline==1 ? '在线' : '离线'}}</view>
				<view>当前电量：{{appInfo.quantity ? `${appInfo.quantity}%` : ''}}</view>
				<view v-if="false">当前网络：12MB/s</view>
			</view>
		</view>
		<view class="sn_info">
			<view class="pad_bot	" style="font-size: 30rpx;color: #3a3a3a;font-weight: bold;padding-left: 10rpx;">
				设备硬件信息
			</view>
			<view class="cont" style="font-size: 24rpx;">
				<view style="color: #7f7f7f;" class="pad_bot">【机型】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.device}}</text></view>
				<view style="color: #7f7f7f;" class="pad_bot">【显示屏】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.screen_rate}}</text></view>
				<view style="color: #7f7f7f;" class="pad_bot">【硬件码】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.value}}</text></view>
				<view style="color: #7f7f7f;" class="pad_bot">【WLAN MAC地址】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.mac}}</text></view>
				<view style="color: #7f7f7f;" class="pad_bot">【电量及电压】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.voltage}}-{{appInfo.quantity}}%</text></view>
				<!-- <view style="color: #7f7f7f;" class="pad_bot">【是否充电状态】<text style="font-weight:bold;color: #3a3a3a;">M16 OG.PLUS</text></view> -->
				<view style="color: #7f7f7f;" class="pad_bot">【设备储存情况】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.storageOrigin}}</text></view>
				<view style="color: #7f7f7f;" class="pad_bot">【IMEI(SIM卡槽1)】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.imei}}</text></view>
				<!-- <view style="color: #7f7f7f;" class="pad_bot">【IMEI(SIM卡槽2)】<text style="font-weight:bold;color: #3a3a3a;">M16 OG.PLUS</text></view> -->
				<!-- <view style="color: #7f7f7f;" class="pad_bot">【蓝牙地址】<text style="font-weight:bold;color: #3a3a3a;">M16 OG.PLUS</text></view> -->
			</view>
			<view class="pad_bot pad_top_big" style="font-size: 30rpx;color: #3a3a3a;font-weight: bold;padding-left: 10rpx;">
				设备软件信息
			</view>
			<view class="cont" style="font-size: 24rpx;">
				<view style="color: #7f7f7f;" class="pad_bot">【激活时间】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.create_time}}</text></view>
				<!-- <view style="color: #7f7f7f;" class="pad_bot">【应用市场版本】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.appstore_version ? appInfo.appstore_version : ''}}</text></view> -->
				<view style="color: #7f7f7f;" class="pad_bot">【设备信息版本】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.appstore_version ? appInfo.appstore_version : ''}}</text></view>
				<!-- <view style="color: #7f7f7f;" class="pad_bot">【下载组件版本】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.updatetools_version ? appInfo.updatetools_version : ''}}</text></view> -->
				<view style="color: #7f7f7f;" class="pad_bot">【系统ROM版本】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.rom_version}}</text></view>
				<view style="color: #7f7f7f;" class="pad_bot">【绑定家长账号】<text style="font-weight:bold;color: #3a3a3a;">{{appInfo.account}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		querySnLogInfo,
		checkRefresh
	} from '@/api/userHome.js'
	export default {
		data() {
			return {
				snId: '',
				appInfo: {},
				app: {},
				topic: false,
				id: undefined,
				isOnline: 2,
				app_btn: {
					color: '#FFFFFF',
					'background-color': '#2979ff',
					'letter-spacing': '8rpx',
					'line-height': '80rpx',
					overflow: 'hidden',
					'border-radius': '60rpx'
				},
			}
		},
		onLoad(option) {
			this.snId = option.snId
			this.isOnline = option.isOnline
			this.getquerySnLogInfo(this.snId)
		},
		beforeDestroy() {
		},
		created() {
		},
		methods: {
			
			//获取每日在线和应用使用信息
			getquerySnLogInfo(id) {
				querySnLogInfo({
					id: id
				}).then(res => {
					this.appInfo = res.data
					// Object.keys(this.appInfo).forEach(key => {
					// 	this.appInfo[key] = res.data[key]
					// })
				}).catch(err => {
					console.log('获取每日在线和应用使用信息', err)
				})
			},
			
		}
	}
</script>

<style lang="less">
	.header_info{
		.left_info{
			.name{
				font-size: 30rpx;
				font-weight: bold;
				margin-left: 20rpx;
			}
		}
		.right_info{
			font-size: 24rpx;
		}
	}
	.sn_info{
		padding: 40rpx 20rpx;
		border-radius: 30rpx;
		background-color: #FFFFFF;
	}
	.bg {
		background-color: #F8F8F8;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.ipad_user {
		.user_box {
			width: 31.5%;
			padding: 40rpx 20rpx;
			text-align: center;

			.icon {
				font-size: 52rpx
			}

			image {
				height: 120rpx;
				width: 120rpx;
				overflow: hidden;
				border-radius: 50%;
			}

			.txt {
				margin-top: 20rpx;
			}
		}
	}

	image {
		width: 100%;
		height: 100%;
	}

	.user_app {
		margin-top: 20rpx;

		.line_app {
			width: 100%;

			.apo_img {
				height: 80rpx;
				width: 80rpx;


			}

			.app_txt {
				font-size: 18rpx;
				width: 80%;

				.title {
					//margin-bottom: 20rpx;
					font-size: 24rpx;
				}
			}
		}

		.app_number {
			flex: 1;
			text-align: center;
			padding: 20rpx;

			.number {
				font-size: 50rpx;
				font-weight: 600;
				width: 100%;
			}

			.install {
				font-size: 18rpx;
			}
		}
	}

	.city {
		margin-top: 20rpx;
		padding: 20rpx;
		font-size: 24rpx;
		letter-spacing: 1px;
	}

	.ipad {
		padding: 20rpx;
		margin-top: 20rpx;

		image {
			height: 60rpx;
			width: 80rpx;
			margin-right: 20rpx;
		}

		.left {
			flex: 1;

			.title {
				font-weight: 600;
			}
		}

		.right {
			width: 40%;
			letter-spacing: 1px;

			.txt {
				text-align: right;
				font-size: 24rpx;
			}

			.icon {
				font-size: 56rpx;
				background-color: #FFFFFF;
				padding: 5rpx;
				border-radius: 50%;
				margin-left: 20rpx;
			}
		}
	}

	.control_img {
		margin-right: 20rpx;
		background-image: linear-gradient(135deg, #2e89ff 50%, #6f36f7 40%);
		-webkit-background-clip: text;
		color: transparent;
		font-size: 80rpx;
	}

	.textHiddens::before {
		content: " ";
		height: 22rpx;
		width: 22rpx;
		display: inline-block;
		border-radius: 50%;
		line-height: 26rpx;
		margin: 0 10rpx;
	}

	.green::before {
		background-color: #83de32;
	}

	.lines::before {
		background-color: #d2d6de;
	}
	
	.sn_title{
		line-height: 50rpx;
		font-weight: 600;
		.txt{
			font-weight: normal;
			margin-left: 20rpx;
		}
	}
</style>
